<template>
  <div>
    <vxe-button @click="exportDataEvent">导出</vxe-button>
    <vxe-table :data="tableData" ref="tableRef">
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="skuName" title="sku名称"></vxe-column>
      <vxe-column field="skuDesc" title="sku描述"></vxe-column>
      <vxe-column field="price" title="sku价格"></vxe-column>
      <vxe-column field="weight" title="sku重量"></vxe-column>
    </vxe-table>
  </div>
</template>

<script lang="ts" setup>
// https://vxetable.cn/#/table/base/basic
defineOptions({
  name: "table",
});

import { ref } from "vue";

const tableData = ref([
  {
    id: 1,
    skuName: "华为 ",
    skuDesc: "遥遥领先",
    price: 111,
    weight: 11,
    imageUrl: "/8.jpg",
    pdfName: "项目介绍.pdf",
    pdfSrc: "/项目介绍.pdf",
  },
  {
    id: 2,
    skuName: "华为2 ",
    skuDesc: "遥遥领先2",
    price: 111,
    weight: 11,
    imageUrl: "/8.jpg",
    pdfName: "项目介绍.pdf",
    pdfSrc: "/项目介绍.pdf",
  },
]);

const tableRef = ref();

const exportDataEvent = () => {
  const $table = tableRef.value;
  if ($table) {
    $table.exportData({ type: "csv" });
  }
};
</script>

<style scoped lang="scss"></style>
